<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="18">
        <el-table :data="cart_list" border>
         <el-table-column  type="selection">

         </el-table-column>
          <el-table-column label="商品名称" prop="goods.name">
            <template slot-scope="scope">
              <img src="/static/slide01.jpg" style="width:100px;" />
              <span>{{scope.row.goods.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品价格" prop="goods.price"></el-table-column>
          <el-table-column label="数量" prop="num">
              <template slot-scope="scope">
                  <el-input-number v-model="scope.row.num"></el-input-number>
              </template>
          </el-table-column>
          <el-table-column label="小计">
              <template slot-scope="scope">
                  <span>{{scope.row.goods.price * scope.row.num}} 元</span>
              </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row type="flex" justify="end">
        <el-col :span="8">
            <span>合计{{total_amount}}元</span>
            <span>总共:{{total_count}}个</span>
            <el-button type="danger">去结算</el-button>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cart_list: [],
    };
  },
  created() {
    this.axios
      .get("/cart?token=" + sessionStorage.getItem("token"))
      .then(resp => {
        console.log(resp.data);
        this.cart_list = resp.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  computed: {
      total_amount(){
          let amount=0
          for(let i=0;i<this.cart_list.length;i++){
              amount+=this.cart_list[i].num*this.cart_list[i].goods.price
          }
          return amount
      },
      total_count(){
          let count=0
          for(let i=0;i<this.cart_list.length;i++){
              count+=this.cart_list[i].num
          }
          return count
      }
  },
  methods:{
      del(id){
          //删除 某一个购物车记录
          this.axios.delete("/cart/"+id+"/?token="+sessionStorage.getItem("token")).then(resp=>{
              console.log(resp.data)
              this.$message({
                  "message":"删除成功",
                  "type":"success"
              })
              //刷新页面
              this.$router.go(0)
          })
      }
  }
};
</script>

<style>
</style>
